<template>
  <div class="link-layer-content">
    <!-- {{ bottomIcon }} -->
    <div class="flex">
      <div class="link-layer-left icon-layer-left">
        <ul>
          <li
          class="cursor-p"
          v-for="(item, index) in iconList"
          :key="index"
          :class="item.show ? 'active' : ''"
          @click="setIconName(item)">{{ item.text }}</li>
        </ul>
      </div>
      <div class="link-layer-right icon-layer-right flex-item">
        <ul>
          <li
            class="cursor-p"
            :class="item.show ? 'active' : ''"
            v-for="(item, index) in selIconList" :key="index"
            @click="setIconItem(item)">
            <div class="iconImg">
              <img
                v-if="item.unselectIcon"
                :src="item.unselectIcon"
                alt="">
              <img
                v-if="item.selectIcon"
                :src="item.selectIcon"
                alt="">
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import { mpBottomIcon } from '@/utils/mp-bottom-icon'
  export default {
    components: {},
    props: {
      bottomIconData: {
        type: Object,
        default: {}
      },
      appType: {
        type: Number,
        default: 10
      },
      pageType: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        iconStyle: null,
        iconList: [],
        selIconList: [],
        bottomIcon: {}
      }
    },
    // 初始化页面
    created() {
      this.iconList = mpBottomIcon()
      this.bottomIcon = this.$utils.deepClone(this.bottomIconData)
      this.setIconName(this.bottomIcon)
      const that = this
      this.$bus.$on('navItem', function(data) {
        that.bottomIcon = that.$utils.deepClone(data)
        that.setIconName(that.bottomIcon)
      })
    },
    mounted() {
    },
    methods: {
      setIconName(obj) {
        this.iconStyle = obj.iconStyle
        this.iconList.forEach(item => {
          item.show = false
          if (obj.iconStyle === item.iconStyle) {
            item.show = true
            this.selIconList = this.$utils.deepClone(item.list)
            this.selIconList.forEach(itemSub => {
              itemSub.show = false
              if (itemSub.selectIcon === obj.selectIcon) {
                itemSub.show = true
              }
              // 已选中数据
              if (itemSub.selectIcon === this.bottomIcon.selectIcon) {
                itemSub.show = true
              }
            })
          }
        })
      },
      setIconItem(obj) {
        // 改变初始选中数据
        this.bottomIcon.selectIcon = obj.selectIcon
        this.bottomIcon.unselectIcon = obj.unselectIcon
        this.bottomIcon.navName = obj.navName
        // 改变当前选中数据
        this.selIconList.forEach(itemSub => {
          itemSub.show = false
          if (itemSub.selectIcon === obj.selectIcon) {
            itemSub.show = true
            const changeData = itemSub.show
            this.$delete(itemSub, 'show')
            this.$set(itemSub, 'show', changeData)
          }
        })
        const params = Object.assign({ 'iconStyle': this.iconStyle }, obj)
        this.$emit('selectIcon', params)
      }
    }
  }
</script>
